UI Design for Nonprofit Website "Slow Food USA"
Yao Gu
About
The Slow Food USA is a non-profit organization that inspire individuals to change the world through good, clean, fair food.
They cultivate connections to community and place, advocate for diversity in ecosystems and protect natural resources for future generations.
Current Website
User Research
What different sorts of people might use this product?
- Member & Donor (Primary)
- Volunteer
- Member & Donor (Primary)
- Volunteer
How might their needs and behaviors vary?
- Member & Donor: Care about how the things they eat were grown. Advocate green life
- Volunteer: Willing to support local farmers. Willing to join local events.
- Member & Donor: Care about how the things they eat were grown. Advocate green life
- Volunteer: Willing to support local farmers. Willing to join local events.
What ranges of behaviors and types of environments need to be explored?
- Willingness to eat environment-friendly food in daily life.
- Desire to join the local slow food event to support local green product business
- Willingness to eat environment-friendly food in daily life.
- Desire to join the local slow food event to support local green product business
Two personas based on this.
User Stories
As people always eat green food, I want to search the food provider information quickly and accurately so that helps me make a quick decision while shopping rather than spend time near the shelves.
As people like green food but new to this city, I want to get familiar with local providers and brand in a short time so that I can try it next time shopping.
As a people like eat green food and want to become a member of green food organization, I want to connect with people who also care about environment-friendly food so that I could communicate with people like me.
As people want to grow food in my garden, I want to search for high-quality instructions or take courses easily.
Use Cases
Search Green Food
• Enter provider name or other keywords, or select food categories, or scan the barcode
• Display all matched food providers and a short introduction of its business. If allowed to access the current location, some local provider would rank higher
• Click one item to read the detail
• Display all matched food providers and a short introduction of its business. If allowed to access the current location, some local provider would rank higher
• Click one item to read the detail
Check recent events
• Display recent events and short introduction ranked based on location
• Click one item to read the detail
• At the end of the event introduction, there is a number of people joined
• Display recent events and short introduction ranked based on location
• Click one item to read the detail
• At the end of the event introduction, there is a number of people joined
Search instructions about grow plant
• Enter provider name or other keywords, or select list of plant categories
• Display all articles of instructions about plants want to grow.
• At the end of articles, required tools and seed are summarized into a lis
• If allow the browser access current location, the server will estimate difficulty of plant this by using data of local weather
Information Architecture
User Interface Design
Desktop & Responsive Mobile
Desktop Wireframes
Responsive Mobile Wireframes
Prototype
Full version on Sketch Cloud: https://sketch.cloud/s/On8j8/
Mobile Homepage: A new header
Make elements self-evident
Usability Testing
Goals and Assumptions
• User should be able to navigate through the website.
• User should be able to use the search bar
• User should be able to browse productions, new, events, instructions
• User will be able to join the event
• User will be able to make a payment and will feel confirmed after payment
Establishing questions
• How often do you buy food in market
• How much extra you would like to pay for food that are friendly to environment
• How much extra you would like to pay for food that are friendly to environment
Usability Testing
Result Analysis
Findings
1. Participants are able to find tasks. Not going to make great change on UX design.
2. Based on the task usability test video, homepage is the first choice to find functionality. If they can not find in this way, then they will use the hamburger button.
3. For event, people are likely to find from homepage directly rather than hamburger button
4. The payment experience is good. Participants feel confirmed after making a payment.
5. In the searching task, some participants could not find the search button.
Solutions:
1. Make search button more buttony
2 More functionality in homepage
